<template>
  <el-dialog
    :title="title ? '厅主开户编辑':'厅主开户'"
    :visible.sync="showBlogForm"
    custom-class="mini-dialog dialog-style" :close-on-click-modal="false"
    @closed="closeClear">
    <!--label-width="80px" 依照標題字數去設-->
    <el-form :model="ruleForm" :rules="type?rules:rulesHall" auto-complete="off" class="form" size="small" ref="ruleForm" label-width="100px" :label-position="screenW > 768 ? 'right':'top'">
      <el-form-item label="厅主类型" prop="tenantType">
        <el-select v-model="ruleForm.tenantType" :disabled="title" placeholder="请选择厅主类型">
          <el-option v-if="title" label="系统" :value="0"></el-option>
          <el-option label="直营厅主" :value="1"></el-option>
          <el-option label="渠道厅主" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- 禁止自动填入密码 -->
      <div class="displayinput"><input type="text" name="username" value="" ><input type="password" name="password"  value="" ></div>
      <el-form-item label="厅主编码" prop="tenantCode">
        <el-input v-model="ruleForm.tenantCode" :disabled="title"  placeholder="请输入厅主编码"></el-input>
      </el-form-item>
      <div class="border-line"></div>
      <el-form-item label="厅主账号" prop="admin">
        <el-input v-model="ruleForm.admin" :disabled="title" placeholder="请输入厅主账号"></el-input>
      </el-form-item>
      <el-form-item label="厅主密码" prop="password" >
        <el-input v-model="ruleForm.password" :type="'password'" auto-complete="off"  placeholder="请输入厅主密码"></el-input>
      </el-form-item>
      <el-form-item label="厅主名称" prop="name" >
        <el-input v-model="ruleForm.name"  placeholder="请输入厅主名称"></el-input>
      </el-form-item>
      <!-- 是否开户 -->
      <template v-if="type">
        <div class="border-line"></div>
        <el-form-item label="后台网址" prop="url" >
          <el-input v-model="ruleForm.url"  placeholder="如：xx.xxx.com"></el-input>
        </el-form-item>
        <el-form-item label="绑定IP" prop="ip" >
          <el-input v-model="ruleForm.ip"  placeholder="如：1.1.1.1"></el-input>
        </el-form-item>
        <el-form-item label="客户端名称" prop="clientName" >
          <el-input v-model="ruleForm.clientName"  placeholder="请输入客户端名称"></el-input>
        </el-form-item>
        <div class="border-line"></div>
        <el-form-item label="大厅音乐" prop="hallMusic" >
          <el-select v-model="ruleForm.hallMusic" placeholder="请选择大厅音乐" popper-class="music-select">
            <el-option v-for="(item,index) in hallMusicArr" :label="item.name" :value="item.resourceCode" :key="index">
              {{item.name}}<span class="music-hover" @click.stop="playSounds(`${item.resourceCode}${item.id}`, item.resourceUrl)" ><music-icon v-if="nowPlay === `${item.resourceCode}${item.id}`&&playState"></music-icon>试听</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="大厅场景" prop="hallScene">
          <el-select v-model="ruleForm.hallScene"  placeholder="请选择大厅场景"  popper-class="pic-select">
            <el-option v-for="(item,index) in hallSceneArr" :label="item.name" :value="item.resourceCode" :key="index">
              <template v-if="item.demoUrl.indexOf('.mp4')>-1">
                <video class="bgcolor-video" :src="item.demoUrl|imgHost" width="80" height="30">
                  不支持 video 标签
                </video><span>{{item.name}}</span>
              </template>
              <template v-else>
                <img class="demoimg" width="80" height="30" :src="item.demoUrl|imgHost" alt="" /><span>{{item.name}}</span>
              </template>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登录场景" prop="loginScene" >
          <el-select v-model="ruleForm.loginScene"  placeholder="请选择登录场景"  popper-class="pic-select">
            <el-option v-for="(item,index) in loginSceneArr" :label="item.name" :value="item.resourceCode" :key="index">
              <template v-if="item.demoUrl.indexOf('.mp4')>-1">
                <video class="bgcolor-video" :src="item.demoUrl|imgHost" width="80" height="30">
                  不支持 video 标签
                </video><span>{{item.name}}</span>
              </template>
              <template v-else>
                <img class="demoimg" width="80" height="30" :src="item.demoUrl|imgHost" alt="" /><span>{{item.name}}</span>
              </template>
            </el-option>
          </el-select>
        </el-form-item>
        <div class="border-line"></div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="ICON图标" prop="iconFile" class="upload-item upload-item-left">
              <div class="img-upload">
                <el-upload
                  v-loading="iconFileloading"
                  class="avatar-uploader imgshow"
                  action=""
                  name="icon-file"
                  :show-file-list="false"
                  :auto-upload="false"
                  accept="image/png"
                  element-loading-customClass="loadingClass"
                  :on-change="iconFileUpload"
                  element-loading-spinner="dafa-icon-loading01 dafa-icon">
                  <img v-if="ruleForm.iconFile" :src="ruleForm.iconFile" >
                  <div class="img-off" v-else>
                    <i  class="el-icon-plus avatar-uploader-icon"></i>
                    <div class="upload-info">点击上传</div>
                  </div>
                </el-upload>
                <i v-if="ruleForm.iconFile"  class="el-icon-error" @click="deleteImage('iconFile')"></i>
              </div>
              <span class="text-style">尺寸限制 <span class="color-danger">512*512</span> / 大小限制 200K 以下</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="大厅LOGO" prop="hallLogoFile" class="upload-item upload-item-right">
              <div class="img-upload">
                <el-upload
                  v-loading="hallLogoFileloading"
                  class="avatar-uploader imgshow"
                  action=""
                  :show-file-list="false"
                  :auto-upload="false"
                  accept="image/png"
                  element-loading-customClass="loadingClass"
                  :on-change="hallLogoFileUpload"
                  element-loading-spinner="dafa-icon-loading01 dafa-icon">
                  <img v-if="ruleForm.hallLogoFile" :src="ruleForm.hallLogoFile" >
                  <template v-else>
                    <i  class="el-icon-plus avatar-uploader-icon"></i>
                    <div>点击上传</div>
                  </template>
                </el-upload>
                <i v-if="ruleForm.hallLogoFile" class="el-icon-error" @click="deleteImage('hallLogoFile')"></i>
              </div>
              <span class="text-style">尺寸限制<span class="color-danger"> 360*200</span> / 大小限制 200K 以下</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="官网LOGO" prop="webLogoFile" class="upload-item upload-item-left">
              <div class="img-upload">
                <el-upload
                  v-loading="webLogoFileloading"
                  class="avatar-uploader imgshow"
                  action=""
                  :show-file-list="false"
                  :auto-upload="false"
                  accept="image/png"
                  :on-change="webLogoFileUpload"
                  element-loading-customClass="loadingClass"
                  element-loading-spinner="dafa-icon-loading01 dafa-icon">
                  <img v-if="ruleForm.webLogoFile" :src="ruleForm.webLogoFile" >
                  <template v-else>
                    <i  class="el-icon-plus avatar-uploader-icon"></i>
                    <div>点击上传</div>
                  </template>
                </el-upload>
                <i v-if="ruleForm.webLogoFile" class="el-icon-error" @click="deleteImage('webLogoFile')"></i>
              </div>
              <span class="text-style">尺寸限制<span class="color-danger">200*50</span> / 大小限制 200K 以下</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="后台LOGO" prop="cmsLogoFile" class="upload-item upload-item-right">
              <div class="img-upload">
                <el-upload
                  v-loading="cmsLogoFileloading"
                  class="avatar-uploader imgshow"
                  action=""
                  :show-file-list="false"
                  :auto-upload="false"
                  accept="image/png"
                  :on-change="cmsLogoFileUpload"
                  element-loading-customClass="loadingClass"
                  element-loading-spinner="dafa-icon-loading01 dafa-icon">
                  <img v-if="ruleForm.cmsLogoFile" :src="ruleForm.cmsLogoFile" >
                  <template v-else>
                    <i  class="el-icon-plus avatar-uploader-icon"></i>
                    <div>点击上传</div>
                  </template>
                </el-upload>
                <i v-if="ruleForm.cmsLogoFile" class="el-icon-error" @click="deleteImage('cmsLogoFile')"></i>
              </div>
              <span class="text-style">尺寸限制<span class="color-danger"> 220*48</span> / 大小限制 200K 以下</span>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeClear" size="mini">取 消</el-button>
      <el-button :disabled="submitLoading" type="primary" size="mini" @click="submitForm('ruleForm')" :loading="submitLoading"> 确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    data () {
      return {}
    }
  }
// import Api from '@/api/sys'
// import md5 from 'js-md5/build/md5.min'
// import {imgHost} from '@/utils/index'
// import  from '@/components/MusicIcon'
// import {password, checkIP, checkNotHttp} from '@/utils/validate'
// const defaultOptions = {
//   tenantType: 1,
//   tenantCode: '',
//   admin: '',
//   password: '',
//   name: '',
//   url: '',
//   ip: '',
//   clientName: '',
//   hallMusic: '',
//   hallScene: '',
//   loginScene: '',
//   iconFile: '',
//   hallLogoFile: '',
//   webLogoFile: '',
//   cmsLogoFile: ''
// }
// export default {
//   data () {
//     let validatePass = (rule, value, callback) => {
//       if (!password(value)) {
//         callback(new Error('密码长度在 6 到 16 个字符'))
//         return
//       }
//       callback()
//     }
//     let ipFormat = (rule, value, callback) => {
//       if (!checkIP(value)) {
//         callback(new Error('IP格式错误'))
//       } else {
//         callback()
//       }
//     }
//     let validateUrl = (rule, value, callback) => {
//       if (!value || value === '') {
//         callback(new Error('请输入域名'))
//         return false
//       }
//       if (!checkNotHttp(value)) {
//         callback(new Error('域名格式错误'))
//         return false
//       }
//       let index = value.toLowerCase().indexOf('http://')
//       if (index > -1) {
//         callback(new Error('格式错误，不能包含http://'))
//         return
//       }
//       index = value.toLowerCase().indexOf('https://')
//       if (index > -1) {
//         callback(new Error('格式错误，不能包含https://'))
//         return
//       }
//       index = value.toLowerCase().indexOf('www.')
//       if (index > -1) {
//         callback(new Error('格式错误，不需要添加WWW.与M.'))
//         return
//       }
//       let reg = /^m\./
//       let valid = reg.test(value.toLowerCase())
//       if (valid) {
//         callback(new Error('格式错误，不需要添加WWW.与M.'))
//         return
//       }
//       let urlData = value.split('.')
//       if (urlData.length !== 3) {
//         callback(new Error('后台网址必须使用二级域名（但不支持WWW.或M.）'))
//         return false
//       }
//       callback()
//     }
//     return {
//       title: false,
//       showBlogForm: false,
//       submitLoading: false,
//       imageUrl: {
//
//       },
//       ruleForm: {...defaultOptions},
//       rulesHall: {
//         tenantCode: [
//           { required: true, message: '请输入厅主编码', trigger: 'blur' },
//           {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
//         ],
//         admin: [
//           { required: true, message: '请输入厅主账号', trigger: 'blur' },
//           {min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur'}
//         ],
//         password: [
//           { required: true, message: '请输入厅主密码', trigger: 'blur' },
//           { validator: validatePass, trigger: 'blur' }
//         ],
//         name: [
//           { required: true, message: '请输入厅主名称', trigger: 'blur' },
//           {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
//         ]
//       },
//       rules: {
//         tenantCode: [
//           { required: true, message: '请输入厅主编码', trigger: 'blur' },
//           {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
//         ],
//         admin: [
//           { required: true, message: '请输入厅主账号', trigger: 'blur' },
//           {min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur'}
//         ],
//         password: [
//           { required: true, message: '请输入厅主密码', trigger: 'blur' },
//           { validator: validatePass, trigger: 'blur' }
//         ],
//         name: [
//           { required: true, message: '请输入厅主名称', trigger: 'blur' },
//           {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
//         ],
//         ip: [
//           { required: true, message: '请绑定Ip', trigger: 'blur' },
//           { validator: ipFormat, trigger: 'blur' }
//         ],
//         url: [
//           { required: true, message: '请输入后台网址', trigger: 'blur' },
//           { validator: validateUrl, trigger: 'blur' }
//         ],
//         clientName: [
//           { required: true, message: '请输入客户端名称', trigger: 'blur' },
//           {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
//         ],
//         hallMusic: [
//           { required: true, message: '请选择大厅音乐', trigger: 'change' }
//         ],
//         hallScene: [
//           { required: true, message: '请选择大厅场景', trigger: 'change' }
//         ],
//         loginScene: [
//           { required: true, message: '请选择登录场景', trigger: 'change' }
//         ],
//         iconFile: [
//           { required: true, message: '请上传ICON图标', trigger: 'blur' }
//         ],
//         hallLogoFile: [
//           { required: true, message: '请上传大厅LOGO', trigger: 'blur' }
//         ],
//         webLogoFile: [
//           { required: true, message: '请上传官网LOGO', trigger: 'blur' }
//         ],
//         cmsLogoFile: [
//           { required: true, message: '请上传后台LOGO', trigger: 'blur' }
//         ]
//       },
//       iconFileloading: false,
//       hallLogoFileloading: false,
//       webLogoFileloading: false,
//       cmsLogoFileloading: false,
//       hallMusicArr: [], // 音乐
//       hallSceneArr: [], // 大厅场景
//       loginSceneArr: [], // 登录场景
//       logoFileArr: {
//         'iconFile': null,
//         'hallLogoFile': null,
//         'webLogoFile': null,
//         'cmsLogoFile': null
//       },
//       nowPlay: ''// 当前播放的音乐
//     }
//   },
//   props: {
//     visible: {
//       type: Boolean,
//       default: () => {
//         return false
//       }
//     },
//     data: {
//       type: Object,
//       default: () => {
//         return {}
//       }
//     },
//     type: {
//       type: Boolean,
//       default: () => {
//         return true
//       }
//     }
//   },
//   computed: {
//     screenW () {
//       return this.$store.state.media.screenWidth
//     },
//     playState () {
//       return this.$store.state.musicLoading
//     }
//   },
//   methods: {
//     // 试听音乐
//     playSounds (id, url) {
//       if (this.playState && id === this.nowPlay) {
//         this.$store.state.musicLoading = false
//         this.stopSound()
//       } else {
//         this.nowPlay = id
//         this.playSound(id, {url: imgHost(url)})
//       }
//     },
//     deleteImage (v) {
//       this.ruleForm[v] = null
//     },
//     closeClear () {
//       this.resetForm('ruleForm')
//       this.$emit('onClose')
//     },
//     resetForm (formName) {
//       this.$refs[formName].resetFields()
//     },
//     handleAvatarSuccess (res, file) {
//       console.log(file, res)
//     },
//     beforeAvatarUpload (file) {
//       console.log(file)
//     },
//     submitForm (formName) {
//       this.$refs[formName].validate((valid) => {
//         if (valid) {
//           this.submitLoading = true
//           if (this.type) {
//             // 新增开户
//             this.addPostFrom()
//           } else {
//             // 修改厅主
//             this.editPostFrom()
//           }
//         } else {
//           console.log('error submit!!')
//           return false
//         }
//       })
//     },
//     // 开户
//     addPostFrom () {
//       let data = this.ruleForm
//       let fd = new FormData()
//       fd.append('tenantType', parseInt(data.tenantType))
//       fd.append('tenantCode', data.tenantCode)
//       fd.append('admin', data.admin)
//       fd.append('password', md5(data.admin + md5(data.password)))
//       fd.append('name', data.name)
//       fd.append('url', data.url)
//       fd.append('ip', data.ip)
//       fd.append('clientName', data.clientName)
//       fd.append('hallMusic', data.hallMusic)
//       fd.append('hallScene', data.hallScene)
//       fd.append('loginScene', data.loginScene)
//       let ArrData = ['iconFile', 'webLogoFile', 'hallLogoFile', 'cmsLogoFile']
//       ArrData.forEach((v, i) => {
//         fd.append('file', this.logoFileArr[v].raw)
//       })
//       // Api.addTenant(fd).then(res => {
//       //   this.submitLoading = false
//       //   if (res.code === 1) {
//       //     this.closeClear()
//       //     this.msgSuccess('保存成功')
//       //     this.$parent.getList()
//       //   }
//       // })
//     },
//     // 修改
//     editPostFrom () {
//       let data = this.ruleForm
//       let admin = data.admin.toLowerCase()
//       let parame = {
//         tenantCode: data.tenantCode,
//         password: data.password === '******' ? '' : md5(admin + md5(data.password)),
//         name: data.name
//       }
//       // Api.updateTenant(parame).then(res => {
//       //   this.submitLoading = false
//       //   if (res.code === 1) {
//       //     this.closeClear()
//       //     this.msgSuccess('保存成功')
//       //     this.$parent.getList()
//       //   }
//       // })
//     },
//     // 拆分数据
//     setResourcesData (arr) {
//       if (!arr || !(arr && arr.length)) return
//       let ArraySet = {
//         1: [],
//         2: [],
//         3: []
//       }
//       arr.forEach(v => {
//         ArraySet[v.type].push(v)
//       })
//       this.hallMusicArr = ArraySet[1]
//       this.hallSceneArr = ArraySet[2]
//       this.loginSceneArr = ArraySet[3]
//     },
//     getListContentResources () {
//       let parame = {
//         type: '',
//         startDate: '',
//         endDate: ''
//       }
//       // Api.listContentResources(parame).then(res => {
//       //   if (res.code === 1) {
//       //     this.setResourcesData(res.data)
//       //   }
//       // })
//     },
//     setImgLoad (file, name, WH) {
//       if (!file) {
//         return
//       }
//       let that = this
//       // 限制文件大小处理
//       let size = file.size
//       if (size / 1024 > 200) {
//         this.msgError('图片大小不能大于200KB,请重新上传')
//         this.logoFileArr[name] = null
//         that[name + 'loading'] = false
//         return false
//       }
//       var reader = new FileReader()
//       let imgFomat = {
//         iconFile: [512, 512, 'ICON图标'],
//         hallLogoFile: [360, 200, '大厅LOGO'],
//         webLogoFile: [200, 50, '官网LOGO'],
//         cmsLogoFile: [220, 48, '后台LOGO']
//       }
//       let nowImg = imgFomat[name]
//       reader.onload = function (e) {
//         let img = new Image()
//         img.onload = function (x) {
//           let width = img.width
//           let height = img.height
//           if (width === nowImg[0] && height === nowImg[1]) {
//             that.ruleForm[name] = e.target.result
//             that[name + 'loading'] = false
//           } else {
//             that.msgError(`${nowImg[2]}图片宽高不正确`)
//             that.logoFileArr[name] = null
//             that[name + 'loading'] = false
//           }
//         }
//         img.src = e.target.result
//       }
//       reader.readAsDataURL(file)
//     },
//     // 上传图片处理
//     // iconFileloading: false,
//     // hallLogoFileloading: false,
//     // webLogoFileloading: false,
//     // cmsLogoFileloading: false,
//     iconFileUpload (file) {
//       this.iconFileloading = true
//       this.logoFileArr['iconFile'] = file
//       this.setImgLoad(file.raw, 'iconFile')
//     },
//     hallLogoFileUpload (file) {
//       this.hallLogoFileloading = true
//       this.logoFileArr['hallLogoFile'] = file
//       this.setImgLoad(file.raw, 'hallLogoFile')
//     },
//     webLogoFileUpload (file) {
//       this.webLogoFileloading = true
//       this.logoFileArr['webLogoFile'] = file
//       this.setImgLoad(file.raw, 'webLogoFile')
//     },
//     cmsLogoFileUpload (file) {
//       this.cmsLogoFileloading = true
//       this.logoFileArr['cmsLogoFile'] = file
//       this.setImgLoad(file.raw, 'cmsLogoFile')
//     }
//   },
//   components: {
//     MusicIcon
//   },
//   watch: {
//     visible (nv) {
//       this.showBlogForm = nv
//       if (nv) {
//         this.$nextTick(() => {
//           // 判斷是否編輯或新增
//           this.title = false
//           this.resetForm('ruleForm')
//           if (this.data.id) {
//             let data = this.data
//             this.ruleForm = {
//               // id: data.id,
//               tenantType: data.tenantType,
//               tenantCode: data.tenantCode,
//               admin: data.admin,
//               password: '******',
//               name: data.name
//             }
//             this.title = true
//           } else {
//             this.getListContentResources()
//           }
//         })
//       } else {
//         this.submitLoading = false
//         this.$store.state.musicLoading = false
//         this.stopSound()
//       }
//     }
//   }
// }
</script>
<style >
  .music-select{
    & .el-select-dropdown__item{
      position: relative;
      & span{
        position: absolute;
        right: 10px;
        top: 50%;
        display: inline-block;
        transform: translate( 0% , -50%);
        color: var(--color-blue);
        opacity: 1;
      }
      & span:hover{
        opacity: 0.7;
      }
    }
  }
  .bgcolor-video{
    background:#333;
  }
</style>
